// 医院详情列表
import { Card } from "antd"
import { useParams, useNavigate } from "react-router-dom"
import { Button, Descriptions } from "antd"
import React, { useState, useEffect } from "react"
import { HospitalDetails } from "@api/hospitalList"

interface Data {
  bookingRule: {
    cycle: number
    releaseTime: string
    stopTime: string
    quitTime: string
    rule: Array<string>[]
  }
  hospital: {
    id: string
    createTime: string
    param: {
      hostypeString: string
      fullAddress: string
    }
    hoscode: string
    hosname: string
    hostype: string
    provinceCode: string
    cityCode: string
    districtCode: string
    logoData: string
    intro: string
    route: string
    status: number
  }
}

export default function Show() {
  const params = useParams()
  const id = params.id
  const Navigate = useNavigate()

  const [result, setResult] = useState<Data>({
    bookingRule: {
      cycle: 0,
      releaseTime: "",
      stopTime: "",
      quitTime: "",
      rule: [],
    },
    hospital: {
      id: "",
      createTime: "",
      param: {
        hostypeString: "",
        fullAddress: "",
      },
      hoscode: "",
      hosname: "",
      hostype: "",
      provinceCode: "",
      cityCode: "",
      districtCode: "",
      logoData: "",
      intro: "",
      route: "",
      status: 0,
    },
  })

  // 挂载
  useEffect(() => {
    const details = async () => {
      const obj = await HospitalDetails(id + "")
      console.log(obj)
      setResult(obj)
    }
    details()
  }, [])

  return (
    <Card>
      <Descriptions bordered title="基本信息" column={2}>
        <Descriptions.Item label="医院名称">
          {result.hospital.hosname}
        </Descriptions.Item>
        <Descriptions.Item label="医院logo">
          {
            <img
              style={{ width: 100 }}
              src={"data:image/jpeg;base64," + result.hospital.logoData}
              alt="logo"
            />
          }
        </Descriptions.Item>
        <Descriptions.Item label="医院编码">
          {result.hospital.hoscode}
        </Descriptions.Item>
        <Descriptions.Item label="医院地址">
          {result.hospital?.param.fullAddress}
        </Descriptions.Item>
        <Descriptions.Item label="坐车路线" span={2}>
          {result.hospital.route}
        </Descriptions.Item>
        <Descriptions.Item label="医院简介">
          {result.hospital.intro}
        </Descriptions.Item>
      </Descriptions>
      <Descriptions
        bordered
        title="预约规则信息"
        column={2}
        style={{ marginTop: 30 }}
        contentStyle={{ width: 530, height: 58 }}
      >
        <Descriptions.Item label="预约周期">
          {result.bookingRule.cycle + "天"}
        </Descriptions.Item>
        <Descriptions.Item label="放号时间">
          {result.bookingRule.releaseTime}
        </Descriptions.Item>
        <Descriptions.Item label="停挂时间">
          {result.bookingRule.stopTime}
        </Descriptions.Item>
        <Descriptions.Item label="退号时间">
          {result.bookingRule.quitTime}
        </Descriptions.Item>
        <Descriptions.Item label="预约规则" span={2}>
          {/* 拿到的是个数组，需要遍历 */}
          {result.bookingRule.rule.map((item) => {
            return <p>{item}</p>
          })}
        </Descriptions.Item>
      </Descriptions>
      <Button
        style={{ marginTop: 30 }}
        onClick={() => {
          Navigate("/syt/hospital/hospitalList")
        }}
      >
        返回
      </Button>
    </Card>
  )
}
